<template>
    <div class="det-detail">
        <!-- <div class="tit"><span class="tit-text">商品详情</span></div> -->
		<div class="d-flex text-center grap__warp">
			<div class="flex-1 text-999  grap__item" :class="{grap__active:goodsDetArr.parameters&&goodsDetArr.parameters.length&&graphicTab==0,'grap__detail':((!goodsDetArr.parameters)||(!goodsDetArr.parameters.length))&&graphicTab==0}" @click="graphicTabChange(0)">商品详情</div>
			<div  class="flex-1 text-999 grap__item " v-if="goodsDetArr.parameters&&goodsDetArr.parameters.length" :class="{grap__active:graphicTab==1}" @click="graphicTabChange(1)">规格参数</div>
		</div>
        
        <!-- 图文详情 -->
		<template v-if="graphicTab==0">
			<div class="det-graphic" v-if="goodsDetArr.content" v-html="goodsDetArr.content" id="commCotent">{{goodsDetArr.content}}</div>
			<div class="empty" v-if="!goodsDetArr.content">
			    <div class="item-img"><img src="@/assets/images/comment-empty.png" alt="" /></div>
			    <div class="item-txt">暂时没有商品详情</div>
			</div>
		</template>
		
		
		<!-- 规格参数 -->
		<template v-if="goodsDetArr.parameters&&goodsDetArr.parameters.length&&graphicTab==1">
		    <div class="det-spe text-999">
		        <p class="spe-item font-12" v-for="(item,index) in goodsDetArr.parameters" :key="index">
					<span class="item-span" style="max-width: 70%;">{{item.paramName}}:</span>
					<em class="flex-1 ml-1">
						<template v-if="goodsDetArr.prodSource === 'INNER'">
							<template v-for="(paramValueNameItem, paramValueNameIndex) in item.paramValueNameList">{{paramValueNameItem}}&nbsp;&nbsp;</template>
						</template>
						<template v-else>{{item.paramValueName}}</template>
					</em>
				</p>
		    </div>
		</template>
		
		<!-- /规格参数 -->
        
    </div>
</template>

<script>
export default {
    props: {
        goodsDetArr: [String,Object]
    },
	data() {
	    return {
			graphicTab:0,//0 商品详情 1 参数
	      
	    }
	},
	methods:{
		graphicTabChange(value){
			this.graphicTab=value
		},
	},
}
</script>

<style src="@/assets/css/empty.css" scoped></style>
<style lang="stylus" >
#commCotent{
    width: 100%;
    overflow: hidden;
    display: table;
    word-wrap: break-word;
    word-break: break-all;
    img {
        max-width: 100% !important;
        height: auto!important;
      	display: block;
    }
    a {
        width: 100% !important;
    }
    div {
        width: 100% !important;
    }
    ul {
        width: 100% !important;
    }
    li {
        width: 100% !important;
    }
}
</style>

<style lang="stylus" scoped>

.detailDetail {
  margin-top:10px!important
}
.empty {
  margin-top:0!important;
  padding-top:52px
}


.grap__warp{
	border-bottom: 1px solid #F8F8F8;
	.grap__active{
		color:#333 !important;
		
		font-weight :bold;
		position relative;
		&::before{
			content '';
			position absolute;
			left 50%;
			bottom 0;
			transform:translateX(-50%);
			width: 30px;
			height: 4px;
			background: var( --themescolor );
			
		}
	}
}
.grap__item{
	padding: 12px 0;
}
.grap__item.grap__detail{
	font-weight:bold!important;
	color:#333 !important;
}


</style>